---
title: Text
description: Text components display text content with various typography options and styling controls.
source: 'sentry/components/core/text'
resources:
  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/text/text.tsx
  a11y:
    WCAG 1.4.3: https://www.w3.org/TR/WCAG22/#contrast-minimum
    WCAG 1.4.4: https://www.w3.org/TR/WCAG22/#resize-text
    WCAG 1.4.6: https://www.w3.org/TR/WCAG22/#contrast-enhanced
    WCAG 1.4.8: https://www.w3.org/TR/WCAG22/#visual-presentation
    WCAG 1.4.12: https://www.w3.org/TR/WCAG22/#text-spacing
---

import {Container, Flex, Stack} from 'sentry/components/core/layout';
import {ExternalLink, Link} from 'sentry/components/core/link';
import {Heading, Text} from 'sentry/components/core/text';
import * as Storybook from 'sentry/stories';

import documentation from '!!type-loader!@sentry/scraps/text/text';

export {documentation};

To create basic text, wrap content in a `<Text>` component. For semantic headings, use `<Heading>` with the appropriate `as` prop.

```jsx
<Text>This is basic text content</Text>
<Heading as="h1">This is a heading</Heading>
```

## Sizes

Text components support different sizes: `xs`, `sm`, `md` (default), `lg`, `xl`, and `2xl`.

<Storybook.Demo>
  <Storybook.SideBySide vertical>
    <Text size="2xl">Extra extra large text</Text>
    <Text size="xl">Extra large text</Text>
    <Text size="lg">Large text</Text>
    <Text size="md">Medium text (default)</Text>
    <Text size="sm">Small text</Text>
    <Text size="xs">Extra small text</Text>
  </Storybook.SideBySide>
</Storybook.Demo>
```jsx
<Text size="2xl">Extra extra large text</Text>
<Text size="xl">Extra large text</Text>
<Text size="lg">Large text</Text>
<Text size="md">Medium text (default)</Text>
<Text size="sm">Small text</Text>
<Text size="xs">Extra small text</Text>
```

## Variants

Text components support various color variants: `primary` (default), `muted`, `accent`, `success`, `warning`, `danger`, and `promotion`.

<Storybook.Demo>
  <Storybook.SideBySide vertical>
    <Text variant="primary">Primary text (default)</Text>
    <Text variant="muted">Muted text</Text>
    <Text variant="accent">Accent text</Text>
    <Text variant="success">Success text</Text>
    <Text variant="warning">Warning text</Text>
    <Text variant="danger">Danger text</Text>
    <Text variant="promotion">Promotion text</Text>
  </Storybook.SideBySide>
</Storybook.Demo>
```jsx
<Text variant="primary">Primary text (default)</Text>
<Text variant="muted">Muted text</Text>
<Text variant="accent">Accent text</Text>
<Text variant="success">Success text</Text>
<Text variant="warning">Warning text</Text>
<Text variant="danger">Danger text</Text>
<Text variant="promotion">Promotion text</Text>
```

## Custom Elements with `as` Prop

The `<Text>` component can be rendered as different HTML elements using the `as` prop. This allows you to maintain semantic meaning while applying the component's styling.

<Storybook.Demo>
  <Storybook.SideBySide vertical>
    <Text as="p">Text rendered as a paragraph element</Text>
    <Text as="span">Text rendered as a span element</Text>
    <Text as="div">Text rendered as a div element</Text>
  </Storybook.SideBySide>
</Storybook.Demo>
```jsx
<Text as="p">Text rendered as a paragraph element</Text>
<Text as="span">Text rendered as a span element</Text>
<Text as="div">Text rendered as a div element</Text>
```

## Typographic Features

Text components support various typography options including bold, italic, underline, and strikethrough.

<Storybook.Demo>
  <Storybook.SideBySide vertical>
    <Text bold>Bold text</Text>
    <Text italic>Italic text</Text>
    <Text underline>Underlined text</Text>
    <Text underline="dotted">Dotted underlined text</Text>
    <Text strikethrough>Strikethrough text</Text>
    <Text bold italic underline>
      Bold italic underlined text
    </Text>
  </Storybook.SideBySide>
</Storybook.Demo>
```jsx
<Text bold>Bold text</Text>
<Text italic>Italic text</Text>
<Text underline>Underlined text</Text>
<Text underline="dotted">Dotted underlined text</Text>
<Text strikethrough>Strikethrough text</Text>
<Text bold italic underline>
  Bold italic underlined text
</Text>
```

### Links

Both `<Link>` and `<ExternalLink>` components can be used inline in `<Text>` components to give a styled link.

<Storybook.Demo>
  <Container padding="md">
    <Text>
      This is a paragraph with an{' '}
      <Link to="/organizations/sentry/issues/">inline link</Link> that inherits text
      styling.
    </Text>
  </Container>
</Storybook.Demo>
```jsx
<Text>
  This is a paragraph with an <Link to="/organizations/sentry/issues/">inline link</Link>{' '}
  that inherits text styling.
</Text>
```

## Text Alignment

Control text alignment with the `align` prop: `left` (default), `center`, `right`, or `justify`.

<Storybook.Demo>
  <Storybook.SideBySide vertical>
    <Stack gap="md">
      <Container width="200px" padding="md" border="primary">
        <Text align="left">Left aligned text</Text>
      </Container>
      <Container width="200px" padding="md" border="primary">
        <Text align="center">Center aligned text</Text>
      </Container>
      <Container width="200px" padding="md" border="primary">
        <Text align="right">Right aligned text</Text>
      </Container>
      <Container width="200px" padding="md" border="primary">
        <Text align="justify">
          Justified text that will wrap to multiple lines and be justified.
        </Text>
      </Container>
    </Stack>
  </Storybook.SideBySide>
</Storybook.Demo>
```jsx
<Text align="left">Left aligned text</Text>
<Text align="center">Center aligned text</Text>
<Text align="right">Right aligned text</Text>
<Text align="justify">
  Justified text that will wrap to multiple lines and be justified.
</Text>
```

## Density

Control line height with the `density` prop: `compressed` (1.0), default (1.2), or `comfortable` (1.4).

<Storybook.Demo>
  <Storybook.SideBySide vertical>
    <Stack gap="md">
      <Container>
        <Heading as="h4">Compressed density</Heading>
        <Text as="p" density="compressed">
          Compressed density text. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Text>
      </Container>
      <Container>
        <Heading as="h4">Default density</Heading>
        <Text as="p">
          Default density text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Text>
      </Container>
      <Container>
        <Heading as="h4">Comfortable density</Heading>
        <Text as="p" density="comfortable">
          Comfortable density text. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Text>
      </Container>
    </Stack>
  </Storybook.SideBySide>
</Storybook.Demo>
```jsx
<Text density="compressed">Compressed density text...</Text>
<Text>Default density text...</Text>
<Text density="comfortable">Comfortable density text...</Text>
```

## Ellipsis Overflow

Handle text overflow with the `ellipsis` prop to truncate long text with an ellipsis.

<Storybook.Demo>
  <Container width="200px" padding="md" border="primary">
    <Text ellipsis>This is a very long text that will be truncated with an ellipsis</Text>
  </Container>
</Storybook.Demo>
```jsx
<Container width="200px" padding="md" border="primary">
  <Text ellipsis>This is a very long text that will be truncated with an ellipsis</Text>
</Container>
```

## Wrapping

Use the `textWrap` prop to control how the text wraps, and the `wordBreak` prop to control where the text is split during wrapping.

<Storybook.Demo>
  <Stack gap="md">
    <Container width="200px" padding="md" border="primary">
      <Text wordBreak="break-word">
        A URL string that breaks on word boundaries:
        https://example.com/path/?marketingParam1=value1&amp;marketingParam2=some-awkward-long-value
      </Text>
    </Container>
    <Container width="200px" padding="md" border="primary">
      <Text textWrap="balance">
        Balanced text wrapping for a string of words of varying lengths
      </Text>
    </Container>
  </Stack>
</Storybook.Demo>
```jsx
<Container width="200px" padding="md" border="primary">
  <Text wordBreak="break-word">
    A URL string that breaks on word boundaries:
    https://example.com/path/?marketingParam1=value1&amp;marketingParam2=some-awkward-long-value
  </Text>
</Container>

<Container width="200px" padding="md" border="primary">
  <Text textWrap="balance">
    Balanced text wrapping for a string of words of varying lengths
  </Text>
</Container>
```

## Monospace

Use `monospace` for fixed-width text.

<Storybook.Demo>
  <Storybook.SideBySide vertical>
    <Flex align="center" gap="xl" marginBottom="2xl">
      <Text>1234567890</Text>
      <Text size="sm" variant="muted">
        Regular
      </Text>
    </Flex>
    <Flex align="center" gap="xl">
      <Text monospace>1234567890</Text>
      <Text size="sm" variant="muted">
        Monospace
      </Text>
    </Flex>
  </Storybook.SideBySide>
</Storybook.Demo>
```jsx
<Text>1234567890</Text>
<Text monospace>1234567890</Text>
```

## Font Features

Use `tabular` for consistent number alignment and `fraction` for diagonal fraction display.

<Storybook.Demo>
  <Storybook.SideBySide vertical>
    <Flex align="center" gap="xl" marginBottom="2xl">
      <Text>1234567890</Text>
      <Text size="sm" variant="muted">
        Regular numbers
      </Text>
    </Flex>
    <Flex align="center" gap="xl" marginBottom="2xl">
      <Text tabular>1234567890</Text>
      <Text size="sm" variant="muted">
        Tabular numbers
      </Text>
    </Flex>
    <Flex align="center" gap="xl" marginBottom="2xl">
      <Text>1/2 3/4 5/8</Text>
      <Text size="sm" variant="muted">
        Regular fractions
      </Text>
    </Flex>
    <Flex align="center" gap="xl">
      <Text fraction>1/2 3/4 5/8</Text>
      <Text size="sm" variant="muted">
        Diagonal fractions
      </Text>
    </Flex>
  </Storybook.SideBySide>
</Storybook.Demo>
```jsx
<Text tabular>1234567890</Text>
<Text fraction>1/2 3/4 5/8</Text>
```

## Responsive Sizes

Text components support responsive sizes using breakpoint objects. Breakpoints are: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`.

<Storybook.Demo>
  <Container width="200px" border="primary">
    <Text
      size={{xs: 'xs', sm: 'sm', md: 'md', lg: 'lg', xl: 'xl'}}
      align={{xs: 'left', sm: 'center', md: 'right', lg: 'justify', xl: 'left'}}
    >
      Responsive text
    </Text>
  </Container>
</Storybook.Demo>
```jsx
<Text
  size={{xs: 'xs', sm: 'sm', md: 'md', lg: 'lg', xl: 'xl'}}
  align={{xs: 'left', sm: 'center', md: 'right', lg: 'justify', xl: 'left'}}
>
  Responsive text
</Text>
```

## Accessibility

Text components automatically meet WCAG 2.2 AA compliance for color contrast and text spacing. When using semantic headings, ensure proper heading hierarchy for screen readers.
